<template>
<div>
        <header class="header">
         <van-nav-bar
  title="详情"
  left-text="返回"
  right-text="按钮"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
>
  <template #title>
         <div class="iconfont icon-sousuo dds">
        <input type="text" @input="seach" v-model="val">
      </div>
  </template>
  <template #right>
    <van-button type="danger" size='mini'>搜索</van-button>
  </template>
</van-nav-bar>

</header>
<van-dropdown-menu>
  <van-dropdown-item v-model="value1" :options="option1">
  </van-dropdown-item>
  <van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>

<ProList :proList="proList"/>
</div>
</template>

<script>
import Vue from 'vue';
import { DropdownMenu, DropdownItem } from 'vant';
import { NavBar } from 'vant';
import { Button } from 'vant';
import { insearch, } from "@/utlis/seach";
import ProList from "@/components/ProList.vue";

Vue.use(Button);
Vue.use(NavBar);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
export default {
    data(){
    return {
        val:"",

        value1: 0,
      value2: 'a',
      option1: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '价格升序', value: 'b' },
        { text: '价格降序', value: 'c' },
      ],
      proList:[]
       

    }
},
    watch:{
        value2(val){
         
          if(val=="b"){
            this.proList.sort((a,b)=>{
             return a.originprice-b.originprice
            })
          }
          if(val=="c"){
                        this.proList.sort((a,b)=>{
             return b.originprice-a.originprice
            })
          }
          if(val=="a"){
                 insearch({keyword:this.val,count:1,limitNum:10}).then(res=>{
                    console.log(res.data.data);
                     this.proList = res.data.data;
                    //   this.$store.commit("seachss1",res.data.data)
            this.$store.commit("seachss1",res.data.data)
            
        })

          }

        }
    },
    methods:{
            onClickLeft(){
      this.$router.go(-1)
    },
    onClickRight(){
      console.log(1);
    //   this.showPopover= true
    // this.$router.push("/seach2")
                    insearch({keyword:this.val,count:1,limitNum:10}).then(res=>{
                    console.log(res.data.data);
                     this.proList = res.data.data;
                    //   this.$store.commit("seachss1",res.data.data)
            this.$store.commit("seachss1",res.data.data)
            
        })

    
    },
    seach(){
        insearch({keyword:this.val,count:1,limitNum:10}).then(res=>{
            console.log(res);
            
        })
       
    }
    },
    mounted(){
            this.val=this.$store.state.seachval
                                insearch({keyword:this.val,count:1,limitNum:10}).then(res=>{
                    console.log(res.data.data);
                     this.proList = res.data.data;
                    //   this.$store.commit("seachss1",res.data.data)
            this.$store.commit("seachss1",res.data.data)
            
        })
    },
      components:{
    ProList
  },
}
</script>

<style lang='stylus' scoped>
.dds{
  width 200px
  height 32px
  background-color: white
  border-radius: 20px
  border: 1px  solid #ccc
  input{
    margin-top 1vw
    outline: none
    border: 0
  }
  
}
</style>